<template>
	<view class="container">
		<!-- 自定义导航 -->
		<uni-nav-bar
		left-icon="" 
		status-bar=true
		fixed=true
		color="#FFF"
		left-text="" 
		right-text="" 
		:title="maintitle"
		:background-color="bgcolor"
		></uni-nav-bar>
		<!-- 下拉刷新 上拉加载 -->
		<view class="list" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
			<!-- 轮播图 -->
			<view class="swiperBox">
				<uni-swiper-dot  field="content" >
					<swiper class="swiper-box" autoplay="true" circular="true" style="height: 12rem;">
						<swiper-item v-for="(item ,index) in bannerlist" :key="index" >
							<image @click="articlelink(item.link)" :src="item.src" mode="scaleToFill" style="width: 100%;height: 100%;"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			
			<!-- 分类导航 -->
			<view class='memulist'>
				<view class='menuitem' v-for="menuitem in menus" :key="menuitem.id" @click="details(menuitem.id,menuitem.tid,menuitem.desc)">
					<image :src="menuitem.src"></image>
					<view class='text'>{{menuitem.desc}}</view>
				</view> 
			</view>
			<!-- 热门推荐列表 -->
			<view class="hot">
				<view class="hottitle">热门推荐</view>
				<view>
					<sib-list ref="sibList" @isRefresh='isRefresh' @scrolltolowerFn="scrolltolowerFn">
						<!-- 内部block可自定义 -->
						<block class="lists" slot="sibScrollList">
							 <view class="hotitem" v-for="(item,index) in list" :key="index" @click="getDetails(item.a_id,item.type_id)">
								<view class="leftimg">
									<image :src="item.item.images"></image>
								</view>
								<view class="rightbox">
									<view class="title">{{item.item.title}}</view>
									<view v-if="item.item.intro" class="desc">{{item.item.intro}}</view>
									<view v-if="item.item.subheading" class="desc">{{item.item.subheading}}</view>
									<!-- <view v-if="item.item.see" class="views">{{item.item.see}}浏览</view> -->
								</view>
							 </view>
						</block>
					</sib-list>
				</view>
			</view>
		</view>
	</view>
</template>  
<script>
	import api from '@/pages/utils/api.js';
	import {uniSwiperDot} from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	export default {
		data() {
			return {
				maintitle:'天镜湖文旅',
				bgcolor:"#718CFF",
				bannerlist:[],
				list: [], // 数据集
				currPage: 1, // 当前页码
				totalPage: 1, // 总页数
				src:'',
				menus:[
					{id:0,src:"../../static/imgs/ms.png",desc:'饮食',tid:1},
					{id:1,src:"../../static/imgs/cx.png",desc:'出行',tid:2},
					{id:2,src:"../../static/imgs/zs.png",desc:'住宿',tid:3},
					{id:3,src:"../../static/imgs/xw.png",desc:'新闻',tid:4},
					],
				list:[]
			}
		}, 
	
		mounted() {
			
		},
		onLoad() {
			this.getBanner();
			this.getNewsList(this.currPage);
		},
		methods: {
			//轮播
			getBanner:function(){
				var vm = this;
				api.getBanner({
					
				}).then(data=>{
					if(data.code == 1){ 
						console.log('轮播')
						console.log(data)
						vm.bannerlist = data.data.thumb;
					}
				})
			},
			//轮播图详情
			articlelink:function (s){
				if(s.key ==1){
					uni.navigateTo({
					    url:"/pages/menu/details/diet?id="+s.value+"&typeid="+s.key,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}else if(s.key == 2){
					uni.navigateTo({
					    url:"/pages/menu/details/travel?id="+s.value+"&typeid="+s.key,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}else if(s.key == 3){
					uni.navigateTo({
					    url:"/pages/menu/details/live?id="+s.value+"&typeid="+s.key,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}else{
					uni.navigateTo({
					    url:"/pages/menu/details/news?id="+s.value+"&typeid="+s.key,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}
			},
			
			//文章列表
			getNewsList: function (p){
				uni.showLoading({
				    title: '加载中...'
				});
				var vm = this;
				api.getNewsList({
					page:p
				}).then(data=>{
					if(data.code == 1){
						vm.list = data.data;
						setTimeout(function(){
							uni.hideLoading();
						},1000);
					}
				})
			},
			getDetails:function(id,tid){
				var title;
				if(tid == 1){
					title = "饮食栏目";
					uni.navigateTo({
					   url: "/pages/menu/details/diet?id="+id+"&type="+title+"&typeid="+tid,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}else if(tid == 2){
					title = "出行栏目";
					uni.navigateTo({
					    url: "/pages/menu/details/travel?id="+id+"&type="+title+"&typeid="+tid,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}else if(tid == 3){
					title = "住宿栏目";
					uni.navigateTo({
					    url: "/pages/menu/details/live?id="+id+"&type="+title+"&typeid="+tid,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}
				else if(tid == 4){
					title = "新闻栏目";
					uni.navigateTo({
					    url: "/pages/menu/details/news?id="+id+"&type="+title+"&typeid="+tid,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}
				
				
				// uni.navigateTo({
				//     url: "/pages/menu/index?id="+id+"&tid="+tid+"&title="+title,
				// 	animationType: 'pop-in',
				// 	animationDuration: 200
				// });
			},
			
			details: function (id,tid,title){
				uni.navigateTo({
				    url: "/pages/menu/index?id="+id+"&tid="+tid+"&title="+title,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			// 刷新touch监听
			touchstart: function(e) {
			    this.$refs.sibList.refreshStart(e);
			},
			touchmove: function(e) {
			    this.$refs.sibList.refreshMove(e);
			},
			touchend: function(e) {
			    this.$refs.sibList.refreshEnd(e);
			},
			
			// 下拉刷新
			isRefresh: function() {
			    const _this = this
				_this.currPage = 1;
			    setTimeout(() => {
					_this.getNewsList(1);
			        // 刷新结束调用
			        this.$refs.sibList.endAfter()
			    }, 1000)
			},
			
			// 上拉加载
			scrolltolowerFn: function() {
			    const _this = this;
				const pages = ++_this.currPage;
				var  newData = [];
					api.getNewsList({
						page:pages
					}).then(res=>{
						if(res.code == 1){
							newData = res.data;
							if(newData.length > 0){
								uni.showLoading({
									title: '加载中...',
									mask: true
								})
								_this.list = _this.list.concat(newData);
								 setTimeout(() => {
										uni.hideLoading();
								 },1000);
							}
						}else{
								uni.showToast({
									title: '没有更多数据',
									icon: 'none',
									position:"bottom"
								});
							};
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		height: 100%;
	}
	.topimg{ 
		width: 100%;
		height: 7rem;
	}
	
	.memulist{
		width: 20rem;
		float: left;
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;
		padding: 10px 0;
		font-size: .75rem;
	}
   .menuitem{
		width: 5rem;
		text-align: center;
		position: relative;
		display: inline-block;
	}
	.menuitem .text{
		font-size: .8rem;
	}

	.menuitem image{
		width:2.5rem;
		height: 2.5rem;
	}
	.hot{
		margin-top: 5rem;
		padding: 0 1rem;
	}
	.hottitle{
		padding: .5rem 0;
	}
	.hotitem {
		display: flex;
		margin: 1rem 0;
		justify-content: space-between;
	}
	.hotitem .leftimg{
		flex: 2;
		
	}
	.rightbox{
		padding: 0 0 0 10px;
		flex: 3;
		
	}
	.leftimg image{
		width: 100%;
		height:95px;
		border-radius: .5rem;
	}
	
	.rightbox .title{
		font-size: 16px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.rightbox .desc{
		font-size: 12px;
		color:#B8B2B2;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.views{
		color:#D7D7D7;
		font-size: 13px;
	}
	
</style>
